// CesiumScaleLine.js
// 三维自定义比例尺控件，适用于Cesium场景
export default function createCesiumScaleLine(scene, container) {
    let scaleLine = document.createElement('div');
    scaleLine.className = 'cesium-scale-line';
    scaleLine.style.position = 'absolute';
    scaleLine.style.left = '24px';
    scaleLine.style.bottom = '24px';
    scaleLine.style.transform = 'none';
    scaleLine.style.zIndex = 1100;
    scaleLine.style.pointerEvents = 'none';
    scaleLine.style.background = 'rgba(255,255,255,0.2)';
    scaleLine.style.borderRadius = '4px';
    scaleLine.style.padding = '2px 12px';
    scaleLine.style.fontSize = '14px';
    scaleLine.style.color = '#eee';
    scaleLine.style.boxShadow = '0 2px 8px 0 rgba(0,0,0,0.08)';
    scaleLine.innerHTML = `
      <div class="cesium-scale-bar" style="display:flex;align-items:flex-end;height:12px;margin-bottom:2px;">
        <div class="bar-seg" style="width:40px;height:12px;border:1px solid #222;background:#fff;"></div>
        <div class="bar-seg" style="width:40px;height:12px;border:1px solid #222;background:#444;"></div>
        <div class="bar-seg" style="width:40px;height:12px;border:1px solid #222;background:#fff;"></div>
        <div class="bar-seg" style="width:40px;height:12px;border:1px solid #222;background:#444;"></div>
      </div>
      <div class="cesium-scale-labels" style="display:flex;justify-content:space-between;font-size:13px;color:#eee;">
        <span class="label0">0</span>
        <span class="label1"></span>
        <span class="label2"></span>
        <span class="label3"></span>
        <span class="label4"></span>
      </div>
    `;
    container.appendChild(scaleLine);

    let cesiumScaleLineHandler = null;
    function updateScaleLine() {
        if (!scene || !scene.camera) return;
        const view = scene.canvas;
        const y = view.height - 40;
        const px1 = [view.width / 2 - 80, y];
        const px2 = [view.width / 2 + 80, y];
        const cartesian1 = scene.camera.pickEllipsoid(new Cesium.Cartesian2(px1[0], px1[1]), scene.globe.ellipsoid);
        const cartesian2 = scene.camera.pickEllipsoid(new Cesium.Cartesian2(px2[0], px2[1]), scene.globe.ellipsoid);
        if (!cartesian1 || !cartesian2) {
            scaleLine.style.display = 'none';
            return;
        }
        scaleLine.style.display = '';
        const geod = Cesium.Ellipsoid.WGS84;
        const carto1 = geod.cartesianToCartographic(cartesian1);
        const carto2 = geod.cartesianToCartographic(cartesian2);
        const dist = Cesium.Cartesian3.distance(cartesian1, cartesian2);
        let total = dist;
        let unit = 'm';
        let step = total / 4;
        let showTotal = total;
        if (total >= 1000) {
            unit = 'km';
            showTotal = total / 1000;
            step = showTotal / 4;
        }
        const labels = scaleLine.querySelectorAll('.cesium-scale-labels span');
        if (labels.length === 5) {
            function fmt(val) {
                return Math.round(val);
            }
            labels[0].innerText = '0';
            labels[1].innerText = unit === 'm' ? fmt(step) : fmt(step);
            labels[2].innerText = unit === 'm' ? fmt(step * 2) : fmt(step * 2);
            labels[3].innerText = unit === 'm' ? fmt(step * 3) : fmt(step * 3);
            labels[4].innerText = unit === 'm' ? fmt(showTotal) + ' m' : fmt(showTotal) + ' km';
        }
    }
    cesiumScaleLineHandler = () => updateScaleLine();
    scene.camera.moveEnd.addEventListener(cesiumScaleLineHandler);
    scene.camera.changed.addEventListener(cesiumScaleLineHandler);
    updateScaleLine();
    // 返回对象，便于外部销毁
    return {
        el: scaleLine,
        destroy() {
            if (cesiumScaleLineHandler && scene && scene.camera) {
                scene.camera.moveEnd.removeEventListener(cesiumScaleLineHandler);
                scene.camera.changed.removeEventListener(cesiumScaleLineHandler);
            }
            if (scaleLine && container && scaleLine.parentNode === container) {
                container.removeChild(scaleLine);
            }
        }
    };
}
